<template>
  <div class="example-editor">
    <div class="example-editor_title">插入标签</div>
    <el-button v-for="(item, index) in list" :key="index" @click="insert(item)">{{item.text}}</el-button>
    <div class="example-editor_title">基本使用</div>
    <el-button @click="getHtml">获取html</el-button>
    <el-button @click="appendHtml">设置html</el-button>
    <el-button @click="setHtml">重新设置html</el-button>
    <br/><br/>
    <strong>当前html:</strong>
    <div style="border: solid 1px #ccc; padding: 15px;margin-top: 5px;margin-bottom: 10px">
      {{html}}
    </div>

    <o-editor @on-editor-created="editorCreate" v-model="html"/>
  </div>
</template>
<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";

  @Component
  export default class ExampleEditor extends Vue {
    private editor:any = null;

    private html = "<p>姓名:</p><p>邮箱:</p><p>专业:</p><p>毕业时间:</p>";

    private list = [{
      text: "姓名",
      className: "xm"
    }, {
      text: "邮箱",
      className: "yx"
    }, {
      text: "专业",
      className: "zy"
    }, {
      text: "毕业时间",
      className: "bysj"
    }]
    private editorCreate (editor) {
      this.editor = editor;
    }

    private getHtml() {
      let html = this.editor.getHtml();
      console.info(this.editor.getSelectionText())
    }

    private appendHtml() {
      this.editor.insertHtml("这是我设置的html")
    }

    private setHtml() {
      this.editor.setHtml("这是一个新的段落");
    }
    private insert(item) {
      this.editor.insertTag(`#${item.text}`, item.className);
      // this.editor.insertMention("11", "姓名")
      // this.editor.insertHtml("<span class='mark'>这是一个span</span>")
    }

  }
</script>
<style lang="scss">
  .example-editor {
    padding: 10px;
    &_title {
      padding: 10px 0px;
      font-size: 20px;
    }
  }
  .mark {
    color: red;
  }
  .xm {
    padding: 4px 10px !important;
    color: #fff;
    background: #E6A23C;
    border-radius: 4px;
    display: inline-table;
    margin-right: 0px !important;
  }
  .yx {
    padding: 4px 10px !important;
    color: #fff;
    background: #f56c6c;
    border-radius: 4px;
    display: inline-table;
  }
  .zy {
    padding: 4px 10px !important;
    color: #fff;
    background: #889683;
    border-radius: 4px;
    display: inline-table;
  }
  .bysj {
    padding: 4px 10px !important;
    color: #fff;
    background: #409eff;
    border-radius: 4px;
    display: inline-table;
  }
</style>
